@config.main("Help") {
    <link rel="stylesheet" media="screen" href="@routes.Assets.versioned("config/doc.css")">

    <style>

        .text-p{
            text-align: justify;text-indent: 2em;
        }

        .bs-docs-sidebar.affix {
            position: fixed;
            top: 50px;
        }

        .affix {
            top: 50px;
        }



    </style>

    <div class="body-box">
        <div class="page-box">

            @config.subTitle("Help")

            <div class="main-body">

                <div class="row">

                <div class="col-md-12" style="padding-top: 30px;display: flex">
                    <div class="col-md-3" id="myScrollspy">
                        <div class="bs-docs-sidebar affix" id="myNav" >
                            <ul class="nav bs-docs-sidenav" >
                                <li class="active" style="width: 230px"><a href="#help-overview">1. Database Overview</a></li>
                                <li class="active" style="width: 230px">
                                    <a href="#help-usage">2. Database Usage
                                    </a>
                                    <ul class="nav nav-stacked">
                                        <li>
                                            <a href="#help-homepage">2.1 Homepage</a>
                                        </li>
                                        <li>
                                            <a href="#help-browse">2.2 Browse</a>
                                        </li>
                                        <li>
                                            <a href="#help-search">2.3 Search</a>
                                        </li>
                                        <li>
                                            <a href="#help-qtl">2.4 QTL</a>
                                        </li>
                                        <li>
                                            <a href="#help-motif">2.5 Motif</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-md-9" style="padding-bottom: 100px">
                        <h3 id="help-overview"><strong>1. Database overview</strong></h3>

                        <p  class="text-p">
                            Cucume is mainly dedicated to the collection and standardization of RNA methylation sites in Cucurbitaceae. The methylation site data so far comes from our own experimental results: MeRIP-seq on cucumber and pumpkin. A large number of m5C and m6A RNA methylation sites have been reported for the first time. In addition to adult plants, we use vascular exudation as samples for MeRIP-seq. We hope that this information will promote the study of vascular-mediated systemic communication, abiotic stress and disease resistance in Cucurbitaceae. In fact, we previously reported that a cucumber and pumpkin heterograft mobile RNA data set was integrated. Other published data: Cucumber QTL, GWAS SNP datasets are added to provide a basis for in-depth research on the epigenetics of Cucurbitaceae.
                       </p>

                        <h3 id="help-usage"><strong>2. Database Usage</strong></h3>

                        <h5 id="help-homepage"><strong>2.1 Homepage</strong></h5>
                        <p  class="text-p">In the homepage of the Cucume database, there are multiple modules. We classify and organize the bioinformatics data related to methylation and present it to users in the form of tables or graphs. The function of these modules is to further optimize the appearance and layout of our website, simplify the operation logic, and provide a better experience for researchers in the field of RNA methylation.</p>
                        <img src="/assets/images/help/homepage.png" width="100%"/>
                        <hr />
                        <p  class="text-p">Users can also enter the homepage of the corresponding module by clicking the graphic at the bottom of the homepage.</p>
                        <img src="/assets/images/help/nav.png" width="100%"/>
                        <hr />

                        <h5 id="help-browse"><strong>2.2 Browse</strong></h5>
                        <p  class="text-p">To be neat and beautiful on the Browse homepage, the first display is the content of title 1. Users can check the items in 2. to get more information.</p>
                        <p  class="text-p">The information of m5C and m6A comes from our MeRIP-seq experiment. The Adult plant sample is a mixture of cucumber or pumpkin roots, stems, and leaves, and the Vascular sample is vascular exudation. The numbers below them are the highest values ​​of the corresponding methylation peaks. Mobile RNA is grafting mobile RNA. The number under TLS indicates the number of tRNA-like structures in the CDS region. TLS, mobile RNA, GWAS SNP, and QTL information all come from published information.</p>
                        <img src="/assets/images/help/browse.png" width="100%"/>
                        <hr/>
                        <p  class="text-p">Click on a gene ID to enter the details page of the gene, such as the specific methylation site and GWAS SNP site.</p>
                        <img src="/assets/images/help/geneInfo.png" width="100%"/>
                        <hr />
                        <img src="/assets/images/help/cmpm.png" width="100%"/>
                        <hr />
                        <img src="/assets/images/help/snp.png" width="100%"/>
                        <hr />

                        <h5 id="help-search"><strong>2.3 Search</strong></h5>
                        <p  class="text-p">Users can search by ID and conditions.</p>
                        <img src="/assets/images/help/search.png" width="100%"/>
                        <hr />
                        <img src="/assets/images/help/searchP.png" width="100%"/>
                        <hr />
                        <p  class="text-p">The result will show the genes that meet the conditions, which is actually a subset of Browse. The displayed information and operation logic is the same.</p>
                        <img src="/assets/images/help/result.png" width="100%"/>
                        <hr />

                        <h5 id="help-qtl"><strong>2.4 QTL</strong></h5>
                        <p  class="text-p">To provide methylation-related genetic regulation and epigenetic research, we have added the QTL module. On the QTL homepage, currently only information about cucumber QTL (Cs QTL) is provided. After selecting the traits of interest at the top, the QTL corresponding to each trait is displayed in the picture and table below. You can click the corresponding position on the picture or the QTL ID in the table below to enter the QTL details.</p>
                        <img src="/assets/images/help/qtl1.png" width="100%"/>
                        <hr />
                        <img src="/assets/images/help/qtl2.png" width="100%"/>
                        <hr />
                        <p  class="text-p">The basic information of QTL and its m6A or m5C methylation sites are presented.</p>
                        <img src="/assets/images/help/qtl3.png" width="100%"/>
                        <hr />
                        <img src="/assets/images/help/qtl4.png" width="100%"/>
                        <hr />

                        <h5 id="help-motif"><strong>2.5 Motif</strong></h5>
                        <p  class="text-p">In the Motif module, the results of the search using the DREME program are presented per biological repetitions. The details of the analysis and the RNA contained in each motif can be provided for query.</p>
                        <img src="/assets/images/help/motif1.png" width="100%"/>
                        <hr />
                        <img src="/assets/images/help/motif2.png" width="100%"/>
                        <hr />
                        <img src="/assets/images/help/motif3.png" width="100%"/>
                        <hr />
                        <img src="/assets/images/help/motif4.png" width="100%"/>
                        <hr />

                    </div>
                </div>

                </div>



            </div>
        </div>
    </div>

    <script src="@routes.Assets.versioned("config/bootstrap.min.js")" type ="text/javascript"></script>

    <script>
        $(function () {

            $('body').scrollspy({target: '#myScrollspy'})

            $("#myNav").affix({
                offset: {
                    top: 100
                }
            });
        })



    </script>
}